import React, { useState, useEffect } from 'react'
import './Item.css'
import { Iteminfo } from './Iteminfo'
import { Spinner } from 'reactstrap';

export let PeopleItem = (props) => {
    const [like, setLike] = useState(0);
    const [star, setStar] = useState(0);
    const [islike, setIslike] = useState(false);
    const [isstar, setIsstar] = useState(false);
    const [isDel, setIsDel] = useState(false);
    const [user,setUser] = useState({id:''});

    useEffect(() => {
        if(window.user!==undefined){
            setUser(window.user);
        }
        let getstar = async () => {
            let data = new FormData();
            data.append('id', props.data.id);
            let resp = await fetch('/api/index/isstar', {
                method: 'POST',
                body: data
            });
            if (resp.ok) {
                let respjson = await resp.json();
                setIslike(respjson.islike);
                setIsstar(respjson.isstar);
                setLike(respjson.like);
                setStar(respjson.star);
            }
        }
        getstar();
        return () => {

        };
    }, [])

    let clickLike = () => {
        if (islike) {
            setLike(like - 1);
        } else {
            setLike(like + 1);
        }
        setIslike(!islike);
        let data = new FormData();
        data.append('id', props.data.id);
        fetch('/api/index/like', {
            method: 'POST',
            body: data
        });
    }
    let clickStar = () => {
        if (isstar) {
            setStar(star - 1);
        } else {
            setStar(star + 1);
        }
        setIsstar(!isstar);
        let data = new FormData();
        data.append('id', props.data.id);
        fetch('/api/index/star', {
            method: 'POST',
            body: data
        });
    }
    let del = async () => {
        setIsDel(true);
        let data = new FormData();
        data.append('id', props.data.id);
        let resp = await fetch('/api/index/del', {
            method: 'POST',
            body: data
        });
        if (resp.ok) {
            alert("删除成功");
            window.location.reload();
        } else {
            alert("删除失败,请稍后重试");
        }
        setIsDel(false);
    }
    let btn = !isDel ? <div className='more' onClick={del}>
        <svg t="1570677709160" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1132" width="24" height="24"><path d="M746.58 182.614H278.703c-43.075 0-77.98 34.901-77.98 77.976v25.993h623.834V260.59c0-43.075-34.902-77.976-77.979-77.976M610.37 130.63l11.474 82.037H403.441l11.472-82.037H610.37m6.245-51.984H408.67c-21.45 0-41.4 17.362-44.396 38.632l-15.205 108.767c-2.97 21.244 12.16 38.607 33.609 38.607h259.93c21.448 0 36.579-17.362 33.583-38.633l-15.205-108.766c-2.973-21.245-22.923-38.607-44.371-38.607m142.96 259.92H265.707c-28.582 0-49.88 23.302-47.29 51.78l42.595 468.262c2.563 28.48 28.1 51.781 56.682 51.781H707.59c28.582 0 54.118-23.302 56.683-51.78l42.594-468.262c2.588-28.48-18.71-51.781-47.292-51.781M408.67 806.42h-77.98l-25.993-363.887h103.972V806.42z m155.958 0H460.656V442.534h103.972V806.42z m129.965 0h-77.98V442.534h103.973L694.593 806.42z" p-id="1133" fill="#828282"></path></svg>
        <span style={{ fontSize: 16, marginLeft: 12 }}>删除</span>
    </div> : <div className='more'><Spinner color="dark" /> </div>;
    return (
        <div className='item'>
            <Iteminfo data={props.data} />
            <div className='item-action'>
                <div className='action-list'>
                    <div className='like' onClick={clickLike}>
                        <svg t="1569640353605" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2596" width="24" height="24"><path d="M924.9 549.7c22.2-19.8 35.5-48.4 35.5-78.8 0-28.4-11.2-55-31.6-75-20.3-19.9-47.5-30.9-76.4-30.9H687.3c-14.9 0-30 0.8-44.6 1.6l-1.2 0.1h-0.2c-9.4 0.5-15.5-9.6-10.7-17.7 3.7-6.3 7.9-12.7 12.1-19.3 7.6-11.7 16.2-25 23-39 10.9-22.6 25.9-56.5 30.8-90.8 5.5-38.9-2.6-72.1-24.3-98.7-19.2-23.5-48.2-37-79.5-37-21.9 0-43.9 6.8-62.1 19.2-25.3 17.3-37.4 42.1-47.1 62.1v0.1c-2.4 4.9-4.6 9.6-7 13.9-7.2 13-12.5 26.3-17.3 38-6 14.6-11.1 27.2-18.4 37.5-5.7 8-11.3 16.2-16.7 24.1l-0.9 1.4c-20.4 29.9-39.7 58.1-63.8 80.3l-4.9 4.6c-10.3 9.5-27.4 25.5-45.3 38.8-17.8 13.2-28.9 18.3-35.1 20.1-3.1 1-6.5 0.5-9.4-1.2-0.1-0.1-0.2-0.1-0.3-0.2l-0.6-0.4c-8.7-5.3-21.9-13.2-42.9-14.4h-0.2c-29.6-1.3-63.1 8.9-91.7 28.1-40.9 27.3-65.2 72.1-65.2 120v239.3c0 44.7 25.7 93 65.4 122.9 22.5 17 47.4 26.4 72 27.2l3 0.1c22.2 0 38.3-7.8 50.1-13.6 4-1.9 8-4 11.4-5 23.4-7.4 49.5 3.2 81.2 17.8h0.1c25 11.5 53.3 24.6 86.1 28.7 34.1 4.3 70.9 6.3 115.7 6.3 26.4 0 53.1-0.7 78.9-1.3 25.1-0.7 51.1-1.3 76.6-1.3 58.8 0 106.6-47.5 106.6-105.9 0-5.8-0.5-11.6-1.4-17.3-0.9-5.3 1.9-10.5 6.8-12.6 12.6-5.5 24-13.5 33.8-23.6 19.1-19.8 29.6-45.8 29.6-73.2 0-9-1.1-17.9-3.4-26.5-1.2-4.8 0.6-9.9 4.7-12.6 28.6-19.4 46.8-52 46.8-87.7 0-12.2-2.1-24.1-6-35.3-1.8-4.7-0.5-9.7 3.1-12.9zM267.8 405.2z m-63.6 476.7h-1.8c-15.5-0.6-31.8-6.9-47-18.4-28.7-21.6-48-57-48-88V536.1c0-33.2 17.1-64.5 45.8-83.7 20.7-13.9 45.1-21.6 65.3-20.8 10 0.6 15.8 4.1 22.5 8.1l0.6 0.4c1.3 0.8 2.8 1.7 4.5 2.6v424.7c-4.1 1.7-7.9 3.5-11.3 5.2-9.9 5-18.6 9.3-30.6 9.3z m675.7-354.4l-24.6 11.2c-0.2 0.1-0.2 0.3-0.1 0.4l16.3 21.5c8.2 10.8 12.5 23.6 12.5 37.1 0 27.7-18.9 52.4-45.9 59.9l-28.6 7.9c-0.2 0-0.3 0.3-0.2 0.4l15.8 23.9c6.6 10 10.5 21.7 10.7 33.7 0.5 33.7-26 61.4-59.8 63l-36.1 1.7c-0.2 0-0.3 0.2-0.2 0.4l18.5 31c5.7 9.6 8.7 20.5 8.7 31.6 0 34.3-28.2 62.2-62.8 62.2-26.1 0-52.3 0.7-77.7 1.3-25.5 0.7-51.9 1.3-77.8 1.3-43 0-78-1.9-110.3-5.9-26.1-3.3-49-13.8-73.3-25h-0.1c-26-12-50.4-22.2-75.2-24.1V444.9c29.4-10.2 62.3-38 94.2-67.6l4.8-4.5c27.8-25.6 48.4-55.8 70.3-87.7l0.9-1.3c5.3-7.8 10.9-15.9 16.3-23.6 10.2-14.4 16.8-30.6 23.2-46.3v-0.1c4.5-11.1 9.2-22.5 15.1-33.3 2.9-5.3 5.5-10.7 8.1-15.9 8.2-16.9 16.7-34.4 32.3-45 11-7.5 24.3-11.6 37.5-11.6 18.1 0 34.7 7.6 45.6 20.9 31.7 38.9 10.3 96.8-12 142.9-5.6 11.6-13 23.1-20.2 34.2-13.8 21.3-28 43.2-31.3 67.7-1.6 12.1-0.8 21.1 2.5 27.5l7.1 13.8c0.1 0.1 0.2 0.2 0.3 0.1l20.3-3.1c13-0.1 26.2-0.8 38.9-1.5l1.2-0.1c14-0.8 28.4-1.6 42.1-1.6H852c35.4 0 64.2 27.9 64.2 62.2 0.4 24.1-14 46.3-36.3 56.5z" p-id="2597" fill="#828282"></path><path d="M511.96415281932434 512.0311792300457c-0.0009380570644120979 0-0.0016974365927457003 0.0007593795283336025-0.0016974365927457003 0.0016974365927457003s0.0007593795283336025 0.0016974365927457003 0.0016974365927457003 0.0016974365927457003c0.0009380570644120979 0 0.0016974365927457003-0.0007593795283336025 0.0016974365927457003-0.0016974365927457003s-0.0007705468743385089-0.0016974365927457003-0.0016974365927457003-0.0016974365927457003z" p-id="2598" fill="#828282"></path><path d="M191 765.2c-22.7 0-41.2 18.5-41.2 41.2 0 22.7 18.5 41.2 41.2 41.2 22.7 0 41.2-18.5 41.2-41.2-0.1-22.7-18.6-41.2-41.2-41.2z m0 56.3c-8.4 0-15.2-6.8-15.2-15.2s6.8-15.2 15.2-15.2c8.4 0 15.2 6.8 15.2 15.2s-6.9 15.2-15.2 15.2z" p-id="2599" fill={islike ? '#f05030' : "#828282"}></path></svg>
                        <span style={{ fontSize: 16, marginLeft: 12 }}>{like}</span>
                    </div>
                    <div className='start' onClick={clickStar}>
                        <svg t="1569599597751" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2764" width="24" height="24"><path d="M277.8 932c-12.3 0-24.5-3.9-35-11.5-18.5-13.4-27.6-35.8-23.7-58.3l37.1-216.3c1.5-8.4-1.4-17.1-7.5-23L91.5 469.6c-16.4-16-22.2-39.4-15.1-61.1 7.1-21.7 25.5-37.3 48.1-40.6l217.2-31.6c8.5-1.2 15.8-6.6 19.6-14.2l97.1-196.8C468.6 104.7 489.1 92 512 92s43.4 12.7 53.5 33.2L662.6 322c3.8 7.7 11.1 13 19.6 14.2l217.2 31.6c22.6 3.3 41.1 18.8 48.1 40.6 7.1 21.7 1.3 45.2-15.1 61.1L775.3 622.8c-6.1 6-8.9 14.6-7.5 23l7 40.6c1.6 9.1-4.6 17.8-13.7 19.4-9.1 1.6-17.8-4.6-19.4-13.7l-7-40.6c-3.3-19.3 3.1-39.1 17.1-52.8L909 445.5c7.3-7.1 9.7-17 6.6-26.7-3.1-9.6-11-16.3-21-17.7l-217.2-31.6c-19.4-2.8-36.2-15-44.9-32.6l-97.1-196.8c-4.5-9.1-13.2-14.5-23.3-14.5-10.1 0-18.9 5.4-23.3 14.5L391.5 337c-8.7 17.6-25.5 29.8-44.9 32.6l-217.2 31.6c-10 1.5-17.9 8.1-21 17.7-3.1 9.6-0.7 19.6 6.6 26.7l157.2 153.2c14.1 13.7 20.5 33.4 17.1 52.8L252.2 868c-1.7 10 2.2 19.5 10.4 25.5s18.5 6.7 27.4 2l194.3-102.1c17.4-9.1 38.1-9.1 55.5 0L734 895.3c9 4.7 19.2 4 27.4-2s12.1-15.5 10.4-25.5l-6.3-36.5c-1.6-9.1 4.6-17.8 13.7-19.4 9.2-1.6 17.8 4.6 19.4 13.7l6.3 36.5c3.9 22.5-5.2 44.9-23.7 58.3-18.5 13.4-42.6 15.2-62.8 4.5l-194.3-102c-7.6-4-16.6-4-24.2 0L305.6 925.1c-8.8 4.6-18.3 6.9-27.8 6.9z" p-id="2765" fill={isstar ? '#f05030' : "#828282"}></path></svg>
                        <span style={{ fontSize: 16, marginLeft: 12 }}>{star}</span>
                    </div>
                    {user.id == props.data.userid ? btn : <div className='more' />}
                </div>
            </div>
        </div>);
}
